<template>
	<view>
		<view :class="activeTab == 0 ? 'you-bg-1' : 'you-bg'" v-for="(item, index) in lists" :key="index">
			<view class="left">
				<view class="shop-img">
					<view class="money">
						<text>¥</text>
						{{ item.coupon_discount ? item.coupon_discount : '' }}
					</view>
					<view class="get-money">{{ item.coupon_name ? item.coupon_name : '' }}</view>
					<!-- <image :src="item.coupon_images" mode=""></image> -->
				</view>
				<view class="shop-right">
					<view class="title">{{ item.coupon_title ? item.coupon_title : '' }}</view>
					<view class="time">{{ item.coupon_date ? item.coupon_date : '' }}</view>
				</view>
			</view>
			<view class="right" @click="toUse">{{ activeTab == 0 ? '去使用' : activeTab == 1 ? '已使用' : '已过期' }}</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		lists: {
			type: Array,
			default() {
				return [];
			}
		},
		activeTab: {
			type: Number,
			default() {
				return 0;
			}
		}
	},
	name: 'you-list',
	data() {
		return {};
	},
	methods: {
		// 立即使用
		toUse() {
			uni.switchTab({
				url: '/pages/tabBar/tab-1/tab-1'
			});
		}
	}
};
</script>

<style lang="scss">
.you-bg-1 {
	width: 680rpx;
	// height: 170rpx;
	padding: 15rpx;
	background-image: url(/static/image/you-1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin: 0 auto;
	border-radius: 20rpx;
	display: flex;
	justify-content: space-between;
	margin-bottom: 30rpx;
	.left {
		width: 490rpx;
		height: 100%;
		display: flex;
		justify-content: space-between;
		.shop-img {
			width: 200rpx;
			text-align: center;
			.money {
				font-size: 40rpx;
				font-weight: 550;
				color: #ffffff;
				text-shadow: 0px 2rpx 5rpx rgba(0, 0, 0, 0.07);
				margin-top: 20rpx;
				text {
					font-size: 22rpx;
				}
			}
			.get-money {
				font-size: 20rpx;
				font-weight: 400;
				color: #fff;
				line-height: 20px;
				text-shadow: 0px 2rpx 5rpx rgba(0, 0, 0, 0.07);
			}
			// image{
			// 	width: 100%;
			// 	height: 100%;
			// }
		}
	
		.shop-right {
			width: 350rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			margin-top: 10rpx;
			.title {
				width: 110rpx;
				height: 32rpx;
				background: #ffffff;
				border-radius: 15rpx;
				font-weight: 550;
				text-align: center;
				line-height: 32rpx;
				color: #cf4f4f;
				margin-top: 15rpx;
			}
			.time {
				font-size: 24rpx;
				font-weight: 400;
				color: #fff;
				line-height: 54rpx;
				text-shadow: 0px 2rpx 5rpx rgba(0, 0, 0, 0.07);
			}
		}
	}
	.right {
		width: 180rpx;
		height: 140rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		text-align: center;
		line-height: 140rpx;
		color: #CF4F4F;
	}
}
.you-bg {
	width: 680rpx;
	// height: 170rpx;
	padding: 15rpx;
	background-image: url(/static/image/you.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin: 0 auto;
	border-radius: 20rpx;
	display: flex;
	justify-content: space-between;
	margin-bottom: 30rpx;
	.left {
		width: 490rpx;
		height: 100%;
		display: flex;
		justify-content: space-between;
		.shop-img {
			width: 200rpx;
			text-align: center;
			.money {
				font-size: 40rpx;
				font-weight: 550;
				color: #ffffff;
				text-shadow: 0px 2rpx 5rpx rgba(0, 0, 0, 0.07);
				margin-top: 20rpx;
				text {
					font-size: 22rpx;
				}
			}
			.get-money {
				font-size: 20rpx;
				font-weight: 400;
				color: #fff;
				line-height: 20px;
				text-shadow: 0px 2rpx 5rpx rgba(0, 0, 0, 0.07);
			}
			// image{
			// 	width: 100%;
			// 	height: 100%;
			// }
		}

		.shop-right {
			width: 350rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			margin-top: 10rpx;
			.title {
				width: 110rpx;
				height: 32rpx;
				background: #ffffff;
				border-radius: 15rpx;
				font-weight: 550;
				text-align: center;
				line-height: 32rpx;
				color: #cf4f4f;
				margin-top: 15rpx;
			}
			.time {
				font-size: 24rpx;
				font-weight: 400;
				color: #fff;
				line-height: 54rpx;
				text-shadow: 0px 2rpx 5rpx rgba(0, 0, 0, 0.07);
			}
		}
	}
	.right {
		width: 180rpx;
		height: 140rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		line-height: 140rpx;
	}
}
</style>
